<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面布局</title>
<style type="text/css">
	body{
		color: #000;
		background-color: #fff;
		font-family: arial,verdana,sans-serif;
		font-size: 12px;
	}
	h1{
		position: fixed;
		margin:0px;
		top: 0px;
		left: 0px;
		width: 100%;
		color: #fff;
		background-color: #666;
		padding:10px;
		z-index: 2;
	}
	div.nav{
		z-index: 1;
		position: absolute;
		top: 48px;
		left: 0px;
		width: 100px;
		height: 300px;
		padding-left: 10px;
		padding-top: 20px;
		padding-bottom: 10px;
		background-color: #efefef;
	}
	div.nav:before{
		content: "Navigation ";
		font-size: 18px;
		font-weight: bold;	
	}
	h2{
		padding-top: 80px;
		padding-left: 115px;
	}
	p{
		padding-left: 115px;
	}
	p.abstract{
		font-weight: bold;
	}
	img{
		float: left;
		width: 60px;
		padding-right: 5px;
	}
	ul{
		clear: left;
		list-style:circle;
		padding-left: 145px;
	}
	.bottom{
		margin-left: 115px;
		width: 500px;
		border:2px dashed grey;
		#text-align: center;
	}
	.bottom p{
		width: 200px;
		padding-left: 0px;	
		border:1px dashed green;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
</style>
</head>
<body>
	
	<h1>Cascading Style Sheets</h1>
	<div class="nav">
		<a href="#">Examples index</a>
		&nbsp; <a href="">Chapter 8 Code</a> 
	</div>
	<h2>CSS Positioning</h2>
	<p class="abstract"><img class="floatLeft" src="logo.jpg" alt="wrox logo" />
		This article introduces the topic of laying out
		web pages in CSS using a combination of positioning schemes.</p>
	<p>CSS allows you to use three different positioning schemes ot create
			complex layouts:	
	</p>
	<ul>
		<li>Normal flow</li>
		<li>Absolute positioning</li>	
		<li>Floating</li>
	</ul>
	<p>
		By using a combination of these schemes you do not need to resort to
		using tables to lay out your pages.
	</p>
	<div class="bottom">
		<p>
			hello everybody!!! <br />
			By using a combination of these schemes you do not need to resort to
			using tables to lay out your pages.By using a combination of these schemes 
			you do not need to resort to using tables to lay out your pages.
			By using a combination of these schemes you do not need to resort to
			using tables to lay out your pages.
		</p>	
	</div>
</body>
</html>